<template>
    <view class="withdrawal">
        <view class="withdrawal-top">
            <image src="/static/withdraw/awal1@2x.png" class="awal1"></image>
            <view class="yuer">
                当前余额(元)
            </view>
            <view class="num">
                {{userList.balance}}
            </view>
<!--            <view class="tg">
                <view class="tg-left">
                    已获得推广奖励:
                </view>
                <view class="tg-right">
                    0.00
                </view>
            </view> -->
        </view>
        <!-- 提现 -->
        <view class="jer">
            <view class="jer-text">
                <image src="../../static/hover.png" class="hover"></image>
                <view class="text">
                    提现金额
                </view>
            </view>
            <view class="list">
                <view class="list-left">
                  <input type="text" v-model="face" placeholder="输入提现金额"/>
                </view>
                <view class="list-right" @click="face = userList.balance">
                    全部提现
                </view>
            </view>
        </view>
        <view class="jer">
            <view class="jer-text">
                <image src="../../static/hover.png" class="hover"></image>
                <view class="text">
                    到账方式
                </view>
            </view>
            <view class="list" hover-class="checkActive"  v-for="(item,index) in tabList" :key="index"    v-if="item.whether">
                <view class="list-left"  @click="index=1">
                      <view class="jg-leftleft">
                          <image :src="item.image" class="awal2"></image>
                      </view>
                      <view class="left-phon">
                        <view class="name">
                          {{item.name}}
                        </view>
												<view class="">
													<view class="phone flex alcenter" v-if="tage === item.tage">
													  {{tage === 1?withdraw.account:tage === 3?withdraw.nickName:withdraw.account}}
														<view class="ml16 c_9C8446" @click="updateAccount">更换账号</view>
													</view>
												</view>

                      </view>
                </view>
                <view class="list-right">
                   <image src="/static/withdraw/awal5@2x.png" @click="tabClick(item.tage)" class="awal5" :class="tage === item.tage?'active':''"></image>
                   <image src="/static/withdraw/awal4@2x.png"  @click="tabClick(item.tage)"  :class="tage === item.tage?'':'active'"  class="awal5 "></image>
                </view>
            </view>
        </view>
				<view class="jer">
					<view class="jer-text">
					    <image src="../../static/hover.png" class="hover"></image>
					    <view class="text">
					        提现规则
					    </view>
					</view>
					<view class="list">
						<rich-text :nodes="$fxLink.checkescape2Html(face_remark)"></rich-text>
					</view>
				</view>
        <view class="bottom">
            <view class="bottom-left">
                <view class="left">
                    <view class="left-text">
                        实时到账
                    </view>
                    <view class="text">
                        ￥
                    </view>
                    <view class="num">
                        {{face?face:0}}
                    </view>
                </view>
<!--                <view class="right-text">
                    扣除手续费: 0元/笔
                </view> -->
            </view>
            <view class="bottom-right" @click="withdrawPrice">
                <view class="awal6">
                </view>
                <view class="text">
                    立即提现
                </view>
            </view>
        </view>
				<uni-popup ref="withdrawAccountList">
					<view class="doling-item widthdraw-pop">
						<view class="doling-top flex alcenter">
							<view class="flex alcenter flex-one">
								<view>管理</view>
								<view class="doling-text flex-one text-center">
										请选择提现账号
								</view>
							</view>

							<image @click="$refs.withdrawAccountList.close()" src="../../static/qw@2x.png" class="qx"></image>
						</view>
						<view class="mt40">
							<template v-if="withdrawAllList.length > 0">
								<view v-for="(item,index) in withdrawAllList" :key='index' class="widthdraw-list-item alcenter flex-between" @click="selectWithdraw(item)">
									<view class="flex alcenter">
										<image :src="item.type===1?'/static/withdraw/awal2@2x.png':item.type===3?item.avatarUrl:'/static/withdraw/bank.png'" class="photo-img"></image>
										<view class="ml20 ft28">
											<view class="c_ccc">
												{{item.type === 1?'支付宝账号':item.type===3?'微信账号':item.bank_name}}
												<text v-if="item.type === 2">{{item.account_type === 1?'(对公账户)':''}}</text>
											</view>
											<view class="">
												{{item.type === 1?item.account:item.type===3?item.nickName:item.account}}
											</view>
										</view>
									</view>
									<view class="list-right">
										<image src="/static/withdraw/awal4@2x.png"  v-if="item.id === withdraw.id"  class="awal5 "></image>
									  <image src="/static/withdraw/awal5@2x.png" class="awal5"  v-else></image>
									</view>
								</view>
							</template>
							<view v-else>
								<mescrollEmpty></mescrollEmpty>
								<view>立即添加</view>
							</view>
						</view>
					</view>
				</uni-popup>
				<uni-popup ref="successPop">
					<view class="bg-white rounded16 success-main text-center">
						<view class="window-add">
							<view class="item"></view>
						</view>
						<view class="success_msg">{{msg}}</view>
						<view class="ft30 mt24 c_ccc">微信,支付宝提现秒到账</view>
						<view class="success_button" @click="$refs.successPop.close()">确认</view>
					</view>
				</uni-popup>
				<uni-popup ref="errorPop">
					<view class="bg-white rounded16 success-main text-center">
						<view class="add order-err" style="">
							<view class="add_err"></view>
						</view>
						<view class="success_msg">操作失败</view>
						<view class="ft30 mt24 c_ccc">{{msg}}</view>
						<view class="success_button" @click="$refs.errorPop.close()">关闭</view>
					</view>
				</uni-popup>
    </view>
</template>

<script>
	import * as userApi from '@/api/user.js'
	import util from '@/utils/util.js'
	import mescrollEmpty from '@/components/lccg/mescroll-uni/components/mescroll-empty/mescroll-empty.vue'
	export default{
		components:{
			mescrollEmpty
		},
		data(){
			return{
				userList:{},
				tabList:[
					{
						"whether":true,
						"name":"支付宝",
						"tage":1,
						"image":"/static/withdraw/awal2@2x.png",
					},
					{
						"whether":true,
						"name":"银行卡",
						"tage":2,
						"image":"/static/withdraw/bank.png",
					},
					{
						"whether":true,
						"name":"微信",
						"tage":3,
						"image":"/static/withdraw/awal3@2x.png",
					},
				],
				tage:1,
				face_remark:"",
				withdrawAllList:[],
				withdraw:{},
				face:"",
				noticeText:"",
				advertisingObj:{},
				msg:""
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getDetail()
			this.advertisement()
		},
		methods:{
			openWidthdrawAccount(){
				uni.navigateTo({
					url:"/pages/user/user_item/withdrawAccount/index?tage=" + this.tage
				})
			},
			postAdvert(type){
				let phonemodel = this.gainPhoneDetail()
				let mobiledevices = this.$fxLink.checkGain()
				userApi.advertisement_number({
					id:this.advertisingObj.id,
					user_id:uni.getStorageSync('userInfo').user_id,
					phonemodel,
					mobiledevices,
					type
				})
				.then(result => {
					
				})
			},
			gainPhoneDetail(){
				// #ifdef APP-PLUS
				let brand  = '';
				let zhDev = {
					'apple': 'iPhone',
					'samsung': '三星',
					'huawei': '华为',
					'xiaomi': '小米',
					'oppo': 'OPPO',
					'vivo': 'Vivo',
					'oneplus': '一加',
					'sony': '索尼',
					'lg': 'LG',
					'motorola': '摩托罗拉',
					'google': '谷歌',
					'nokia': '诺基亚',
					'htc': 'HTC',
					'lenovo': '联想',
					'asus': '华硕',
					'zte': '中兴',
					'meizu': '魅族',
					'coolpad': '酷派',
				}
				if (uni.getSystemInfoSync().platform === 'android' || 'ios') {
					let model = uni.getSystemInfoSync().brand.toLowerCase();
					brand = zhDev[model] ? zhDev[model] : '其它'
				} else {
					brand = '其它'
				}
				return brand
				// #endif
				// #ifdef MP
				const res = uni.getSystemInfoSync();
				return res.model
				// #endif
				// #ifdef H5
				return ""
				// #endif
			},
			advertisement(){
				userApi.advertisement({
					
				})
				.then(result => {
					if(util.isEmpty(this.advertisingObj)){
					}
					let list = result.data.data
					for(let i=0;i<list.length;i++){
						if(list[i].alias === '10'){
							this.advertisement_details(list[i])
							break
						}
					}
				})
				
			},
			advertisement_details(item){
				userApi.advertisement_details({
					id:item.id
				})
				.then(result => {
					this.advertisingObj = result.data
				})
			},
			openRecord(){
				uni.navigateTo({
					url:"/pages/user/user_item/withdrawList/index"
				})
			},
			openAdverti(){
				this.postAdvert(2)
				let url = this.advertisingObj.url
				// #ifdef APP-PLUS
				plus.runtime.openURL(url,function(res){
					
				})
				// #endif
				// #ifdef H5
				window.open(url)
				// #endif
				// #ifdef MP
				uni.navigateTo({
					url:`/pageace_user/pages/user/advertising?url=${url}`,
				})
				// #endif
			},
			selectWithdraw(item){
				this.withdraw = item
				this.$refs.withdrawAccountList.close()
			},
			updateAccount(){
				this.$refs.withdrawAccountList.open('bottom')
			},
			tabClick(index){
				this.tage = index
				this.withdraw = {}
				this.withdrawList()
				this.getWithdrawNotice()
			},
			withdrawPrice(){
				let _this = this
				let wid = this.withdraw?this.withdraw.id:""
				if(!wid){
					_this.$toast("请先选择提现账号")
					return
				}
				let token = uni.getStorageSync("AccessToken")
				let advade = 2
				userApi.withdrawPrice({
						wxapp_id: _this.$wxapp_id,
						token: token,
						prices: this.face,
						prices_type: this.tage,
						w_id:wid,
						code:"",
					})
					.then(result => {
						if(!result.msg || result.msg === ''){
							_this.$toast("系统错误请联系客服")
							return
						}
						_this.$toast(result.msg)
						if(result.data === 'err'){
							setTimeout(() => {
								uni.navigateTo({
									url:"/pages/user/user_item/real/identification"
								})
							},1000)
							return
						}
						this.msg = result.msg
						if(result.code === 1){
							this.$refs.successPop.open('center')
							// #ifdef APP-PLUS
							if(this.advertisingObj.app === 1){
								this.postAdvert(1)
							}
							// #endif
							// #ifdef H5
							if(this.advertisingObj.web === 1){
								this.postAdvert(1)
							}
							// #endif
							// #ifdef MP
							if(this.advertisingObj.applet === 1){
								this.postAdvert(1)
							}
							// #endif
							this.face = ''
							_this.userInfo()
						}else{
							this.$refs.errorPop.open('center')
						}
					})
			},
			getWithdrawType(){
				let token = uni.getStorageSync("AccessToken")
				userApi.getWithdrawType({
					wxapp_id: this.$wxapp_id,
					token: token,
				}).then(res => {
					if(res.code === 1){
						if(res.data.withdraw_verification_code === 1){
							this.phone_code = true
						}
						if(res.data.aliPay === 1){
							this.tabList[0].whether = true
						}
						if(res.data.wxPay === 1){
							this.tabList[2].whether = true
						}
						if(res.data.bankPay === 1){
							this.tabList[1].whether = true
						}
						for(let i=0;i<this.tabList.length;i++){
							if(this.tabList[i].whether){
								this.tage = this.tabList[i].tage
								break
							}
						}
						this.getWithdrawNotice()
						this.withdrawList()
					}
				})
			},
			withdrawList(){
				let token = uni.getStorageSync("AccessToken")
				userApi.getWithdrawList({
					wxapp_id: this.$wxapp_id,
					token: token,
					type:this.tage
				}).then(res => {
					if(res.code === 1){
						this.withdraw = {}
						this.withdrawAllList = res.data
						if(this.withdrawAllList.length > 0){
							this.withdraw = this.withdrawAllList[0]
						}
						
					}
				})
			},
			getWithdrawNotice(){
				let _this = this
				let token = uni.getStorageSync("AccessToken")
				userApi.getWithdrawNotice({
					wxapp_id: _this.$wxapp_id,
					token: token,
					type:this.tage
				}).then(res => {
					this.face_remark = res.data.content
					this.noticeText = res.data.notice
				})
			},
			getDetail(){
				let _this = this
				_this.userInfo()
				_this.loadDetail1()
				_this.getWithdrawType()
			},
			userInfo(){
				return new Promise((resolve,reject) => {
					let token = uni.getStorageSync("AccessToken")
					userApi.userInfo({
							token: token,
							wxapp_id: this.$wxapp_id,
						})
						.then(result => {
							if(result.code === 1){
								let userInfo = uni.setStorageSync('userInfo',result.data);
								this.userList = result.data
								if(!this.userList.phone){
									uni.showModal({
										title:"温馨提示",
										content:"提现需要先绑定手机号",
										success: (res) => {
											if(res.confirm){
												uni.navigateTo({
													url:"/pages/user/setup/bind_phone",
												})
											}else{
												uni.switchTab({
													url:"/pages/user/index"
												})
											}
										}
									})
								}
								resolve(result.data)
							}
						})
				})
			},
			loadDetail1() {
				return new Promise((resolve,reject) => {
					let token = uni.getStorageSync("AccessToken")
					userApi.getUserRealStatus({
						wxapp_id: this.$wxapp_id,
						token: token,
						type:1
					})
					.then(result => {
						if(!result.data.name){
							uni.showModal({
								title:"温馨提示",
								content:"提现需要先实名认证",
								showCancel:false,
								success: (res) => {
									if(res.confirm){
										uni.navigateTo({
											url:"/pages/user/user_item/real/primary",
										})
									}else{
										uni.switchTab({
											url:"/pages/user/index"
										})
									}
								}
							})
						}
						resolve(result.data)
					})
				})
			},
		}
	}
</script>

<style lang="scss">
    .checkActive{
        background-color: #F2F7FA;
    }
    .withdrawal{
        .withdrawal-top{
            position: relative;
            background-color: #F2F7FA;
             height: 266rpx;
             
            .awal1{
                left: 30rpx;
                position: absolute;
                width: 682rpx;
                height: 266rpx;
            }
            .yuer{
                padding-top: 42rpx;
                  margin-left: 72rpx;
                  position: relative;
                width: 148rpx;
                height: 36rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #8B8065;
                line-height: 30rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
            .num{
                  position: relative;
                  margin-left: 72rpx;
                  margin-bottom: 34rpx;
                width: 140rpx;
                height: 86rpx;
                font-family: D-DIN-DIN, D-DIN-DIN;
                font-weight: bold;
                font-size: 80rpx;
                color: #333333;
                line-height: 94rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
            .tg{
                  margin-left: 72rpx;
                  position: relative;
                display: flex;
                .tg-left{
                    width: 160rpx;
                    height: 30rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #000000;
                    line-height: 26rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
                .tg-right{
                    width: 46rpx;
                    height: 28rpx;
                    font-family: D-DIN-DIN, D-DIN-DIN;
                    font-weight: bold;
                    font-size: 26rpx;
                    color: #333333;
                    line-height: 30rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }
            
        }
        .jer{
            .jer-text{
                margin-top: 40rpx;
                position: relative;
                 height: 56rpx;
                .hover{
                    position:absolute;
                    width: 68rpx;
                    height: 56rpx;
                }
                .text {
                position:absolute;
               left: 40rpx;
               width: 112rpx;
               height: 56rpx;
               font-family: PingFang SC, PingFang SC;
               font-weight: 600;
               font-size: 28rpx;
               color: #333333;
               line-height: 56rpx;
               text-align: left;
               font-style: normal;
               text-transform: none;
           } 
            }
            .list{
                 transition: 0.2s linear;
                margin: 10rpx 0 ;
                padding: 10rpx 32rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                input{
                   height: 48rpx;  
                     line-height: 48rpx;
                      font-size: 26rpx;
                }
                .list-left{
                    display: flex;
                    width: 80%;
                   .jg-leftleft{
                       margin-right: 34rpx;
                       .awal2{
                           width: 80rpx;
                           height: 80rpx;
                       }
                   } 
                   .left-phon{
                       .name{
                           width: 84rpx;
                           height: 40rpx;
                           font-family: PingFang SC, PingFang SC;
                           font-weight: 400;
                           font-size: 28rpx;
                           color: #2F2F2F;
                           line-height: 33rpx;
                           text-align: left;
                           font-style: normal;
                           text-transform: none;
                       }
                       .phone{
                           width: 100%;
                           height: 28rpx;
                           font-family: SF UI Display, SF UI Display;
                           font-weight: 400;
                           font-size: 24rpx;
                           color: #B3B3B3;
                           line-height: 28rpx;
                           text-align: left;
                           font-style: normal;
                           text-transform: none;
                       }
                   }
                }
                
                .list-right{
                    width: 20%;
                    height: 48rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #9C8446;
                    line-height: 48rpx;
                    font-style: normal;
                    text-transform: none;
                    text-align: right;

                }
            }
          
        }
        .bottom{
            width:calc(100vw - 64rpx);
            padding: 0 32rpx;
            position: fixed;
            bottom: 0;
            left: 0;
            height: 106rpx;
            display: flex;
            justify-content: space-between;
            .bottom-left{
                .left{
                    display: flex;
                    margin-bottom: 10rpx;
                    .left-text{
                        width: 88rpx;
                        height: 42rpx;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 22rpx;
                        color: #626566;
                        line-height: 48rpx;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }
                    .text{
                        width: 22rpx;
                        height: 30rpx;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 600;
                        font-size: 22rpx;
                        color: #FE3131;
                        line-height: 48rpx;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }
                    .num{
                        width: 100rpx;
                        height: 40rpx;
                        font-family: D-DIN-DIN, D-DIN-DIN;
                        font-weight: bold;
                        font-size: 36rpx;
                        color: #FE3131;
                        line-height: 42rpx;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }
                }
                .right-text{
                    width: 210rpx;
                    height: 30rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #ABB0B2;
                    line-height: 26rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
                
            }
            .bottom-right{
                 width: 332rpx;
                position: relative;
                .awal6{
                    position: absolute;
                    width: 332rpx;
                    height: 76rpx;
                    background: url('/static/awal6@2x.png') no-repeat;
                    background-size: 332rpx 76rpx; 
                }
                .text{
                     position: absolute;
                     width: 332rpx;
                     height: 76rpx;
                     font-family: PingFang SC, PingFang SC;
                     font-weight: 600;
                     font-size: 30rpx;
                     color: #FFFFFF;
                     line-height: 76rpx;
                     text-align: center;
                     font-style: normal;
                     text-transform: none;
                }
            }
        }
    .txjl{
        position: fixed;
        right: 24rpx;
        top: 25rpx;
        z-index: 999;
        width: 104rpx;
        height: 36rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #626566;
        line-height: 30rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
    }
		.widthdraw-pop{
			min-height: 300rpx;
		}
		.widthdraw-list-item + .widthdraw-list-item{
			margin-top: 26rpx;
		}
		.photo-img{
			width: 80rpx;
			height: 80rpx;
		}
		.awal5{
		    width: 40rpx;
		    height: 40rpx;
		}
		.active{
		    display: none;
		}
		.success-main{
			padding: 50rpx 30rpx;
			padding-top: 100rpx;
			width: 480rpx;
			margin: 0 auto;
		}
		.success_button{
			margin-top: 50rpx;
			padding: 20rpx 0rpx;
			box-shadow: -1px 8px 11px 0px rgba(15, 170, 255, 0.4);
			margin-bottom: 20rpx;
			background-color: $uni-color-primary;
			color: #fff;
			border-radius: 50rpx;
		}
		.window-add{
			box-shadow: -1px 8px 11px 0px rgba(15, 170, 255, 0.4);
			width: 110rpx;
			height: 110rpx;
			display: inline-block;
			border-radius: 100%;
			background-color: $uni-color-primary;
			position: relative;
		}
		.window-add .item{
			width: 45rpx;
			height: 25rpx;
			display: inline-block;
			border: 2rpx solid #FFFFFF;
			border-width: 0 0 6rpx 6rpx;
			transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg); 
			-o-transform: rotate(-45deg);
			vertical-align: baseline;
			position: absolute;
			left: 30%;
			top: 30%;
		}
		.advertising{
			position: absolute;
			top: -440rpx;
			left: -20rpx;
		}
		.success_msg{
			margin-top: 40rpx;
			font-size: 32rpx;
			font-weight: 500;
		}
		.add{
		
			border-radius: 100%;
			display: inline-block;
			padding: 30rpx;
			padding-bottom: 20rpx;
		}
		.order-err{
			background-color:#E51723;
			box-shadow: -1px 4px 11px 0px rgba(255, 140, 142, 0.4);
		}
		.add_err{
			width: 60rpx;
			height: 60rpx;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.add_err::after{
			width: 100%;
			position: absolute;
			height: 5rpx;
			background: #fff;
			content: "";
			top: 20rpx;
			left: 0;
			transform: rotate(134deg);
			-ms-transform: rotate(134deg);
			-moz-transform: rotate(134deg);
			-webkit-transform: rotate(134deg);
			-o-transform: rotate(134deg);
		}
		.add_err::before{
			width: 100%;
			position: absolute;
			height: 5rpx;
			background: #fff;
			content: "";
			top:20rpx;
			right: 0;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-o-transform: rotate(45deg);
		}
</style>